<script setup>
import MoniterItem from "@/components/MoniterItem2.vue";
import kuang from "@/assets/158.png";
import line from "@/assets/805.png";
import tu1 from "@/assets/8095.png";
import tu2 from "@/assets/825.png";
import tu3 from "@/assets/824.png";
import tu4 from "@/assets/835.png";
import tu5 from "@/assets/826.png";
import tu6 from "@/assets/827.png";
import tu7 from "@/assets/8061.png";
import tu8 from "@/assets/8096.png";
import tu9 from "@/assets/8091.png";
import tu10 from "@/assets/8092.png";
import tu11 from "@/assets/8093.png";
import tu12 from "@/assets/8094.png";

import { onMounted } from "vue";

onMounted(() => {});
</script>

<template>
  <MoniterItem img="2" style="height: 100%" title="系统对接情况">
    <template #content>
      <div class="system-main">
        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu1 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">阳性数据库</div>
            <div class="item-text-two">
              12 <span>户</span>&nbsp;&nbsp;12 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu2 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">风险人员库</div>
            <div class="item-text-two">
              30 <span>户</span>&nbsp;&nbsp;60 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu3 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">隔离人员库</div>
            <div class="item-text-two">
              31 <span>户</span>&nbsp;&nbsp;41 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu4 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">核酸检测数据库</div>
            <div class="item-text-two">
              104 <span>户</span>&nbsp;&nbsp;175 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu5 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">31类重点人员库</div>
            <div class="item-text-two">
              18 <span>户</span>&nbsp;&nbsp;31 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu6 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">场所码数据库</div>
            <div class="item-text-two">
              1203 <span>户</span>&nbsp;&nbsp;2090 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu7 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">四保企业人员数据库</div>
            <div class="item-text-two">
              125 <span>户</span>&nbsp;&nbsp;160 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu8 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">返乡风险人员数据库</div>
            <div class="item-text-two">
              166 <span>户</span>&nbsp;&nbsp;178 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu9 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">郑州富士康人员数据库</div>
            <div class="item-text-two">
              1254 <span>户</span>&nbsp;&nbsp;1765 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu10 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">周口富士康人员库</div>
            <div class="item-text-two">
              1432 <span>户</span>&nbsp;&nbsp;1782 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu11 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">本地在外人员数据库</div>
            <div class="item-text-two">
              122 <span>户</span>&nbsp;&nbsp;142 <span>人</span>
            </div>
          </div>
        </div>

        <div
          class="main-item"
          :style="{ backgroundImage: 'url(' + kuang + ')' }"
        >
          <div
            class="item-img line"
            :style="{ backgroundImage: 'url(' + line + ')' }"
          ></div>
          <div
            class="item-img tu1"
            :style="{ backgroundImage: 'url(' + tu12 + ')' }"
          ></div>
          <div class="item-text">
            <div class="item-text-one">全国中风险地区数据库</div>
            <div class="item-text-two">
              1222 <span>户</span>&nbsp;&nbsp;4112 <span>人</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </MoniterItem>
</template>

<style lang="less" scoped>
.system-main {
  display: flex;
  flex-flow: row wrap;

  /* !当主轴沿水平方向时!justify-content,决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around */
  justify-content: center;
  /* !主轴水平时!决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch */
  align-items: center;

  .main-item {
    width: 40%;
    margin: 5px 10px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 5px 0px;
    .item-img {
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .line {
      width: 10px;
      height: 32px;
    }

    .tu1 {
      margin-left: 5px;
      width: 44px;
      height: 44px;
    }

    .item-text {
      margin-left: 12px;

      .item-text-one {
        font-size: 14px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #54c0fd;
      }

      .item-text-two {
        font-size: 20px;
        font-weight: bold;
        color: #ffffff;
        span {
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
        }
      }
    }
  }
}
</style>
